<template>
  <div style="height: 100%;padding-top: 50px;box-sizing: border-box;
      display: flex;flex-direction: column;">
    <!-- Header区域 -->
    <el-header>分类</el-header>
    <!-- 搜索框区域-->
    <div class="classify_search">
      <div style="display: flex;border: 1px solid #DCDFE6;
      border-radius: 25px;align-items: center;
      padding-right: 5px;box-sizing: border-box;
      ">
        <el-input
          placeholder="搜索你想要的产品"
          v-model="input"
          clearable>
        </el-input>
        <a href="#">
          <span style="font-family: iconfont;">&#xe699;</span>
        </a>
      </div>
    </div>
    <!-- 分类标题区域 -->
    <div class="classify_max_title">
      <div style="background-color: #732707;
      width: 4px;height: 20px;border-radius: 25px;"></div>
      <h3>本店特色</h3>
    </div>
    <!-- 具体分类区域 -->
    <div class="classify_area">
      <ClassifyMenu></ClassifyMenu>
    </div>
  </div>
</template>

<script>
  import ClassifyMenu from "./component/ClassifyMenu.vue"
  export default {
  	name: "Classify",
  	components: {
      ClassifyMenu,
  	},
  	data() {
  		return {
        input: '',
  		}
  	}
  }
</script>

<style scoped>
  /* 搜索框区域 */
  .classify_search{
    padding: 8px 25px;
    box-sizing: border-box;
  }
  .classify_search >>> .el-input__inner{
    height: 35px;
    border-radius: 25px !important;
    border: none;
  }
  .classify_search div span{
    display: inline-block;
    height: 100%;
    /* background-color: #000000; */
    color: #949494;
    font-size: 25px;
  }
  /* 分类标题区域 */
  .classify_max_title{
    display: flex;
    width: 100%;
    border-bottom: 1px solid #8c8c8c;
    padding: 8px 25px;
    box-sizing: border-box;
    align-items: center;
  }
  .classify_max_title h3{
    margin: 0 10px;
    font-size: 23px;
  }
  /* 具体分类区域 */
  .classify_area{
    display: flex;
    width: 100%;
    flex: 1;
  }
  .classify_area .ClassifyMenu{
    display: flex;
  }

</style>
